<template>
  <div class="wrapper">
    <div
      class="item"
      :class="{'desc-item': question.QuestionId === 0}"
      @click="toggleCollect"
    >
      <img
        v-if="isCollected"
        src="~assets/exam/faved.png"
        class="icon"
      >
      <img
        v-else
        src="~assets/exam/fav.png"
        class="icon"
      >
      <span class="name">
        {{ isCollected ? '已' : '' }}收藏
      </span>
    </div>
    <!-- eslint-disable vue/eqeqeq -->
    <div
      v-if="$route.query.ShowType == '2' && $route.query.fromResult != '1'"
      class="item"
      @click="onRemoveItem"
    >
      <img
        src="~assets/exam/del.png"
        class="icon"
      >
      <span class="name">
        移除
      </span>
    </div>
    <div
      class="item"
      @click="goTestCard"
    >
      <img
        src="~assets/exam/note.png"
        class="icon"
      >
      <span class="name">
        答题卡
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import questionRemoveCollect from '@/mixins/questionRemoveCollect'
import mixins from 'vue-typed-mixins'
export default mixins(questionRemoveCollect).extend({
  methods: {
    goTestCard () {
      this.$emit('goTestCard')
    },
  },
})
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  height: 114px;
  align-items: center;
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-size: 22px;
  height: 78px;
}
.desc-item {
  pointer-events: none;
}
.icon {
  height: 36px;
}
</style>
